<template>
    <div class="vmixin">
        <h2>Vue.mixin</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            抽离一部分可复用的vue属性和方法，然后通过引入，被多个组件重复使用。<br>
            可以看到，本手册就使用到了mixin方法。
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            使用步骤
        </el-tag>
        <p class="decr">
            1. 创建mixin.js文件，抽取公用的vue属性和方法。<el-tag><a class="a" target="_blank" href="https://gitee.com/guozia007/vue-handbook/blob/master/src/VueDemoPages/mixin-page.js">点击查看</a></el-tag> <br>
            2. 在需要用到的组件里引入它，比如本组件中就使用到了：import mixinPage from './mixin-page';<br>
            3. 通过mixins: [...]使用它，比如本组件中的使用：mixins: [mixinPage],
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            两种写法
        </el-tag>
        <p class="decr">
            第一种是完整写法：<br>
            const mixin = Vue.mixin({...})<br>
            export default mixin;<br>
            第二种是简写方法：<br>
            本手册的/src/VueDemoPages/mixinPage.js文件，就是用的简写方法。
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vextend',
    mixins: [mixinPage],
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>